<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<swiper class="banner-box"  :autoplay="true"  :interval="4000" :duration="2000" indicator-dots="true">
					<swiper-item class="banner-item" v-for="(item, index) in bannerList" :key="index" @tap="previewImage(item,bannerList)">
						<view class="shop-img">
							<image :src="item" mode="aspectFit"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="shop-info">
					<view class="info-top flexWrap">
						<view class="shop-name-box flexWrapNo">
							<view class="shop-name">{{storeInfo.shop_name}}</view>
						</view>
						<view class="navigation-box flexWrapNo" @tap="navigation()">
							<image src="../../static/home/navigation-icon.png" class="navigation-icon"></image>
							<text>导航</text>
						</view>
					</view>
					<view class="address-info flexWrap">
						<text>{{storeInfo.location||'加载中...'}}</text>
						<text style="flex: none;">距你{{storeInfo.distance||'0km'}}</text>
					</view>
				</view>
				<view class="route-box">
					<text>公共交通：</text>{{storeInfo.bus_routes||'加载中...'}}
				</view>
				<view class="route-box">
					<text>驾车路线：</text>{{storeInfo.driving_route||'加载中...'}}
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				storeInfo:{},
				bannerList:[]
			}
		},
		onLoad() {
			this.storeDetails();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			storeDetails(){
				this.$request.post(this.$api.storeDetails, {
					store_id:uni.getStorageSync('store_id'),
					longitude:uni.getStorageSync('longitude')||"106.540541",
					latitude:uni.getStorageSync('latitude')||"29.590991"
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if(data.entrance_image){
						this.bannerList=data.entrance_image.split(',')
					}
					if (res.code==1) {
						this.storeInfo=data
						this.storeInfo.entrance_image=this.storeInfo.entrance_image
					}
				})
			},
			// 导航
			navigation() {
				let latitude = this.storeInfo.latitude;
				let longitude =  this.storeInfo.longitude;
				let name = this.storeInfo.shop_name;
				let address = this.storeInfo.location;
				if (!latitude || !longitude || !name) {
					uni.showToast({
						title: '打开地图失败,该地址无法查询到',
						duration: 2000,
						icon: 'none'
					});
					console.log(latitude)
					console.log(longitude)
					console.log(name)
					return;
				}
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					name: name,
					address: address,
					fail: res => {
						console.log(res);
						uni.showModal({
							content: '打开地图失败,该地址无法查询到'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 18upx 30upx;
	}
	.banner-box{
		height: 380upx;
		.banner-item{
			height: 380upx;
			border-radius:16upx;
			overflow: hidden;
			.shop-img{
				height: 100%;
			}
		}
	}
	.shop-info{
		margin-top: 28upx;
		.info-top{
			.shop-name-box{
				.shop-name{
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 50upx;
					color: #FFFFFF;
				}
			}
			.navigation-box{
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 36upx;
				color: #FFB726;
				.navigation-icon{
					width: 36upx;
					height: 36upx;
					margin-right: 8upx;
				}
			}
		}
		.address-info{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #999999;
			margin-top: 14upx;
			align-items: baseline;
		}
	}
	.route-box{
		background: #1D1C5C;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 38upx;
		flex: auto;
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 72upx;
		padding: 30upx;
		text{
			color: #0599DB;
		}
	}
</style>
